<template>
	<page name="report" :padding="true" :displayNext="false" ref="pageRef">
		<div id="report-page" slot="main">
			<v-chart class="chart radar-report" v-bind:option="option" :autoresize=true></v-chart>
			<v-chart class="chart bar-report" v-bind:option="questionsOption" :autoresize=true></v-chart>
			<div class="chart">
				<h3>导出复习卡片</h3>
				<v-question ref="form" :withNumber="false" submitText="生成复习卡片" :formFields="fields" :onSubmit="onSubmit"></v-question>
				<div style="text-align:center">
					<el-button type="text" style="margin-top:10px;margin-bottom:10px;" @click="help"><i class="el-icon-question el-icon--left"></i>使用教程</el-button>
				</div>
			</div>
		</div>	
	</page>
</template>

<script>
import store from '~/utils/store'
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import { RadarChart, BarChart } from "echarts/charts"
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DatasetComponent,
  GridComponent
} from "echarts/components"
import ECharts, { THEME_KEY } from "vue-echarts"
import cards from "~/data/cards"
import { push } from '~/router'

use([
  CanvasRenderer,
  RadarChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DatasetComponent,
  GridComponent
]);

export default {
	data() {
		let videoItems = [
				'v_lead',
				'v_introduce'
			];
		
		let items = [
				['q_1', '暴力算法'],
				['q_2', 'PMT表'],
				['q_3', 'Next数组'],
				['q_4', 'c语言扩展（可选）']
			];
		
		let calculateFunc = (item, session = true) => {
			return [store.getItemTimes(`${item}_s`, session), store.getItemTimes(`${item}_f`, session)];
		};
		
		let calculateVideosFunc = (session = true) => {
			return (item) => {
				return store.getItemTimes(item, session) > 0 ? 5 : 1;
			}
		}
		
		let calculateScoreFunc = (index) => {
			return (item) => {
								let nowData = item.data[index];
								
								if (nowData[1] == 0 && nowData[0] == 0)
									return 1;
								return Math.min(5, 5 - nowData[1] + nowData[0] * 1.5)
							}
		};
		
		let data = items.map((item) => {
				let key = item[0];
				return {
					name: item[1],
					data: [
						calculateFunc(key),
						calculateFunc(key, false)
					]
				}
			});
			
		let nowScore = data.map(calculateScoreFunc(0));
		
		return {
			items: items,
			data: data,
			nowScore: nowScore,
			option: {
				title: {
					text: '知识掌握情况雷达图'
				},
				legend: {
					data: ['本次学习', '总体学习（历史+本次）']
				},
				radar: {
					indicator: [
						{ name: '算法意义', max: 5},
						{ name: '算法背景', max: 5},
						{ name: '暴力算法', max: 5},
						{ name: 'PMT表', max: 5},
						{ name: 'Next数组', max: 5},
						{ name: 'c语言扩展（可选）', max: 5},
					]
				},
				series: [{
					name: '学习情况',
					type: 'radar',
					data: [
						{
							value: videoItems.map(calculateVideosFunc(false)).concat(data.map(calculateScoreFunc(1))),
							name: '总体学习（历史+本次）'
						},
						{
							value: videoItems.map(calculateVideosFunc()).concat(nowScore),
							name: '本次学习'
						}
					]
				}]
			},
			questionsOption: {
				title: {
					text: '题目作答情况统计'
				},
				legend: {},
				tooltip: {},
				dataset: {
					source: [
						['题目章节', '本次正确次数', '本次错误次数', '累计正确次数', '累计错误次数'],
					].concat(data.map((item) => {
						let data = item.data;
						
						return [item.name, data[0][0], data[0][1], data[1][0], data[1][1]]
					}))
				},
				xAxis: {type: 'category'},
				yAxis: {
					minInterval: 1
				},
				// Declare several bar series, each will be mapped
				// to a column of dataset.source by default.
				series: [
					{type: 'bar'},
					{type: 'bar'},
					{type: 'bar'},
					{type: 'bar'}
				]
			},
			fields: [
				{
					"title": "请选择要导出的知识点（<b>初始值为系统建议的选择</b>）",
					"key": "checkbox",
					"type": "checkbox",
					"value": [
						{
							"key": "0",
							"name": "基础知识（必选）",
							"disabled": true
						},
						{
							"key": "1",
							"name": "暴力算法"
						},
						{
							"key": "2",
							"name": "PMT表"
						},
						{
							"key": "3",
							"name": "Next数组"
						},
						{
							"key": "4",
							"name": "c语言扩展"
						}
					],
					"default": ["0"].concat(nowScore.map((item, index) => {
						return item <= 3 ? (index + 1).toString() : null;
					}).filter(function (item) {
                        return item !== null;
                    })),
					"nullable": true
				}
			]
		}
	},
	methods: {
		onSubmit(value) {
			let text = "";
			for (let item in value.checkbox)
			{
				text += cards[item];
			}
			let cardsData = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
			
			let element = document.createElement('a');
			element.setAttribute('href', cardsData);
			element.setAttribute('download', 'cards.txt');

			element.style.display = 'none';
			document.body.appendChild(element);

			element.click();

			document.body.removeChild(element);
		},
		help() {
			push(this, '/cardsHelp')
		}
	}
};	
</script>

<style>
.chart {
	padding: 30px;
	padding-bottom: 0px;
}
.radar-report {
	height: 450px;
}
.bar-report {
	height: 450px;
}
</style>